<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户日志操作页面</title>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
  <p style=" font-size: 20px ;color: red">系统设置》》》操作日志</p>
 <div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
 </div>
	
<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">一般日志记录</li>
    <li class="layui-this">异常日志记录</li>
  </ul>
  <div class="layui-tab-content" style="height:auto;">
    <div class="layui-tab-item layui-show">
    	<div class="demoTable">
<div class="layui-btn-group demoTable">
  <button class="layui-btn" data-type="getCheckData">批量删除数据</button>
</div>
   搜索用户名：
  <div class="layui-inline">
    <input  class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
   搜索时间段：
  <div class="layui-inline">
    <input type="date" class="layui-input" name="id" id="startDate" autocomplete="off">
  </div>
   至
  <div class="layui-inline">
    <input type="date" class="layui-input" name="id" id="endDate" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload" id="search">搜索</button>
</div>
 
<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>

layui.use('table', function(){
	 var table = layui.table;
	 
	 
	 
  //方法级渲染
  table.render({
    elem: '#LAY_table_user'
    ,url: '../log/queryLogInfo'
    ,cols: [[
       {type:'checkbox', fixed: 'left'}
      ,{type:'numbers', title: 'ID', width:80, sort: true, fixed: true}
      ,{field:'createBy', title: '用户名',style:'background-color: #009688; color: #fff;'}
      ,{field:'role_name', title: '用户角色'}
      ,{field:'description', title: '操作描述'}
      ,{field:'createDate', title: '创建时间', sort: true}
      ,{field:'requestIp', title: '请求Ip'}
      ,{fixed: 'right', title:'操作',width:178, align:'center', toolbar: '#barDemo'}
    ]]
    ,id: 'testReload'
    ,page: true
    ,height: 315,
    limit:2 ,//每页显示的条数
    limits:[2,4],
    even: true,
    done: function(res, curr, count){
    	/*如果是异步请求数据方式，res即为你接口返回的信息。
    	如果是直接赋值的方式，res即为：{data: [], count: 99} 
    	data为当前页数据、count为数据总长度*/
    		    console.log(res);
    		    if(count==0){
    		    	alert("无数据");
    		    }
    		    
    		    //得到当前页码
    		    console.log(curr); 
    		    
    		    //得到数据总量
    		    console.log(count);
    	   }
  });
  
  
  
 
  //监听表格复选框选择
  table.on('checkbox(user)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(user)', function(obj){
    var data = obj.data;
    var logId = data.logId;
    console.log(logId);
    //jsonData = JSON.stringify(data);
    if(obj.event === 'detail'){
      layer.msg('ID：'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
    	$.ajax({
    		url:"../log/deleteLogInfoById",
    		type:"post",
    		//contentType:"application/json",
	    	data:{logId:logId},
	    	//data:jsonData,
    		dataType:"text",
    		success:function(result){
    			if(result !=0){
    				layer.alert("删除成功！");
    			}else{
    				layer.alert("请重新删除！");
    			}
    		}
    		
    	});
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.alert('编辑行：<br>'+ JSON.stringify(data))
    }
  });
  
  
  //复选框进行批量删除
  var $ = layui.$, active = {
		    getCheckData: function(){ //获取选中数据
		      var checkStatus = table.checkStatus('testReload'),
		                 data = checkStatus.data;
		      console.log("*************"+data);
		      jsonData = JSON.stringify(data);
		      console.log("============="+jsonData);
		      //layer.alert(JSON.stringify(data));
		      $.ajax({
		    	  url:"../log/deleteLogInfo",
		    	  type:"post",
		    	  contentType:"application/json",
		    	  data:jsonData,
		    	  //data:data,
		    	  dataType:"text",
		    	  success:function(result){
		    		 layer.alert(result);
		    		 table.reload('testReload', {
		   			  page: {
		   		          curr: 1 //重新从第 1 页开始
		   		        }  
		   			  
		   		  });
		    	  }
		      });
		    }
		  };
  
  $("#search").click(function(){
	  var demoReload = $('#demoReload').val();
	  var startDate = $('#startDate').val();
	  var endDate =$('#endDate').val();
		 console.log(demoReload);
		 console.log(startDate);
		 console.log(endDate);
		 
		  table.reload('testReload', {
			  page: {
		          curr: 1 //重新从第 1 页开始
		        } ,  
			  where:{
				   //搜索框参数
				  user_name: demoReload,
				  startDate: startDate,
				  endDate: endDate 
			   }
		  });
	  });
  
  
  
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

  
  
  
  
  
  
});

</script>

    </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
</div>


<script>
layui.use('element', function(){
  var element = layui.element;
});
</script>    
</body>
</html>
